import AppContainer from '@/components/AppContainer';

import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import { queryProjectList } from '@/service/deliver';

import { queryCertificate } from '@/service/globalSetting';
import { Button, Image, Form, Input, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';

import React from 'react';

const App = () => {
  let [form] = Form.useForm()
  const { tableProps, search } = useAntdList(queryProjectList, { form })
  const saveCertificate = useAntdModal()
  const columns: ColumnsType<any> = [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: '项目名称',
    dataIndex: 'name'
  },{
    title: '图片',
    render(_){ 
      return <Image height={80} width={80} src={_.img}/>
    }
    // dataIndex: 'img'
  }, {
    title: '创建人',
    dataIndex: 'created_by'
  }, {
    title: '创建时间',
    dataIndex: 'serviceUrl'
  },  {
    title: '操作',
    render(_) {
      return <div>
        <Button type='link' onClick={() => saveCertificate.openModal(_)}>测试</Button>
      </div>
    }
  }
  ]

  return (
    <AppContainer queryFilter={
      <QueryFilter form={form} submit={search.submit} reset={search.reset} >
        <Form.Item label="名称"> <Input /></Form.Item>
        <Form.Item label="类型"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>

      </QueryFilter>
    }
      toolbar={<Toolbar leftRender={<Button onClick={() => saveCertificate.openModal()}>编辑</Button>} />}
    >

      <Table
        rowKey="id"
        columns={columns}
        {...tableProps}

        onChange={(pagination) => {
          // setPage(pagination.current);
        }}
      // pagination={{ total, current: page, pageSize: 5, simple: true }}
      />

    </AppContainer>)
}
export default App